<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '扣款设置',
  },
}
</route>

<script lang="ts" setup>
import { computed, ref } from 'vue'

// Status Picker
const statusColumns = ref([
  { label: '开', value: 'on' },
  { label: '关', value: 'off' },
])
const deductionStatus = ref('off')
const deductionStatusLabel = computed(() => {
  const selected = statusColumns.value.find(item => item.value === deductionStatus.value)
  return selected ? selected.label : ''
})
function onStatusConfirm({ value }) {
  deductionStatus.value = value
}

// Amount Picker
const amountColumns = ref([
  { label: '0元', value: 0 },
  { label: '5元', value: 5 },
  { label: '10元', value: 10 },
  { label: '15元', value: 15 },
])
const deductionAmount = ref(5)
const deductionAmountLabel = computed(() => {
  const selected = amountColumns.value.find(item => item.value === deductionAmount.value)
  return selected ? selected.label : ''
})
function onAmountConfirm({ value }) {
  deductionAmount.value = value
}

function handleBack() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-screen bg-gray-100">
    <view class="p-4">
      <wd-cell-group border>
        <wd-picker v-model="deductionStatus" :columns="statusColumns" use-default-slot @confirm="onStatusConfirm">
          <wd-cell title="自动扣款功能" :value="deductionStatusLabel" is-link />
        </wd-picker>
      </wd-cell-group>

      <view class="my-4" />

      <wd-cell-group border>
        <wd-picker v-model="deductionAmount" :columns="amountColumns" use-default-slot @confirm="onAmountConfirm">
          <wd-cell title="自动扣款设置" :value="deductionAmountLabel" is-link />
        </wd-picker>
      </wd-cell-group>

      <view class="px-4 pt-2 text-xs text-gray-500">
        自动扣款开启后，会在表内达到预警值或表内余额为<text class="mx-1 text-red-500">
          {{ deductionAmount }}元
        </text>时自动扣取余额金额
      </view>
    </view>
  </view>
</template>
